<template>
	<div class="page diet">
		<x-header class='header' slot="header" :left-options="{backText: ''}">饮食指导</x-header>
		<div class="top" style="height: 50px; width: 100%;"></div>

		<view-box class='viewbox'>
			<group v-for="item in diet_guidance">
				<cell :value="item.height">
					<span class="ospan" slot="title">身高(cm)</span>
				</cell>
				<cell :value="item.weight">
					<span class="ospan" slot="title">体重(kg)</span>
				</cell>
				<cell :value="item.dreamWeight">
					<span class="ospan" slot="title">理想体重(kg)</span>
				</cell>
				<cell :value="item.weight">
					<span class="ospan" slot="title">体重(kg)</span>
				</cell>
				<cell :value="item.allCalorie">
					<span class="ospan" slot="title">总热量(kcal)</span>
				</cell>
			</group>
			<div class="box clearfix">
				<!--<p class="title">因您目前的体重超重，我们建议您控制每天摄入的总热量为 XXX大卡左右。早、中、晚三餐的摄入的能量平均分配，每餐 7-8 分饱。主食类、蔬菜类等食物的摄入详情请参考如下：</p>-->
				<ul>
					<li>
						<div class="imgbox">
							<img src="../../../../../static/image/zaocan.png" />
						</div>
						<div class="rightbox">
							<span class="timer">早餐</span>
							<p>建议摄入量：200kcal</p>
						</div>
						<div class="more" @click="toBreakfast">
							查看详情
						</div>
					</li>
					<li>
						<div class="imgbox">
							<img src="../../../../../static/image/zhongcan.png" />
						</div>
						<div class="rightbox">
							<span class="timer">中餐</span>
							<p>建议摄入量：500kcal</p>
						</div>
						<div class="more" @click="toChinesefood">
							查看详情
						</div>
					</li>
					<li>
						<div class="imgbox">
							<img src="../../../../../static/image/wancan.png" />
						</div>
						<div class="rightbox">
							<span class="timer">晚餐</span>
							<p>建议摄入量：500kcal</p>
						</div>
						<div class="more" @click="toDinner">
							查看详情
						</div>
					</li>
				</ul>
			</div>
		</view-box>
		
		 <!--子页面-->    <!--早餐详情， 中餐，晚餐 页面-->   
		<transition>   <!--enter-active-class='slideInRight animated' leave-active-class='slideOutRight animated'-->
			<router-view>
			</router-view>
		</transition>
	</div>
</template>

<script>
	import Api from '@/api/index.js' //  引入api文件
	export default {
		data() {
			return {
				diet_guidance: [],
				customer_id: ''
			}
		},
		created(){
			this.customer_id = localStorage.getItem('customer_id')
			this.getData()
		},
		methods: {
			// 获取数据
			getData(){ 
				console.log(this.customer_id)
				this.$http.get(Api.diet_guidanceApi + this.customer_id) //  饮食指导的基本信息
				.then(({data})=>{
					this.diet_guidance = data.data;
					console.log(data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 去到 早餐详情
			toBreakfast(){
				this.$router.push({
					path: '/improve/diet/breakfast'
				})
			},
			// 中餐详情
			toChinesefood(){
				this.$router.push({
					path: '/improve/diet/chinesefood'
				})
			},
			// 中餐详情
			toDinner(){
				this.$router.push({
					path: '/improve/diet/dinner'
				})
			}
		}
	}
</script>
<style scoped>

</style>
<style lang="less" scoped>
	img {
		display: block;
		width: 100%;
	}
	
	.ospan {
		color: rgb(58, 175, 252);
	}
	
	.diet {
		position: fixed !important;
		left: 0;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 999;
		width: 100%;
		height: 100%;
		overflow: hidden;
		.viewbox {
			background-color: #e8e8e84a;
			.box {
				padding: 10px;
				li {
					float: left;
					margin-bottom: 10px;
					width: 100%;
					background: #fff;
					padding: 10px;
					position: relative;
					box-shadow: 0px 0px 3px #ccc;
					border-radius: 6px;
					.imgbox {
						width: 80px;
						float: left;
					}
					.rightbox {
						float: left;
						padding-top: 10px;
						padding-left: 20px;
						.timer {
							display: block;
							font-size: 18px;
							color: #333;
							margin-bottom: 6px;
						}
						p {
							color: #999;
							font-size: 14px;
						}
					}
					.more {
						width: 78px;
						height: 30px;
						text-align: center;
						line-height: 30px;
						background: #3aaffc;
						color: #fff;
						border-radius: 30px;
						position: absolute;
						right: 4%;
						top: 50%;
						margin-top: -0.35rem;
						font-size: 14px;
					}
				}
			}
		}
	}
</style>